<template>
	<view class="property-catalogue">
		<van-tabs :value="tabActive" @change="tabActive = $event.detail.index" border sticky color="rgb(99,93,247)" title-active-color="rgb(99,93,247)" line-width="53rpx">
			<van-tab title="店铺录单" />
			<van-tab title="抄表记录" />
		</van-tabs>
		
		<van-dropdown-menu v-show="tabActive === 1" active-color="rgb(99,93,247)">
			<van-dropdown-item v-model="value1" :options="option1" />
			<van-dropdown-item v-model="value2" :options="option2" />
			<van-dropdown-item v-model="value3" :options="option3" />
		</van-dropdown-menu>
		
		<view class="content">
			<view class="list_1" v-show="tabActive === 0">
				<navigator v-for="(item, index) in 2" :key="index" class="item" url="/page_admin/property-catalogue/meter-reading/meter-reading">
					<view class="top">
						<view class="text_1">典雅花店</view>
						<view class="text_2">步行街商铺111-61号</view>
					</view>
					<view class="bottom flex-space-between">
						<view class="text_3">上期抄表:2021/12/15 12:00:00</view>
						<van-button round size="small" color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)">抄表录单</van-button>
					</view>
				</navigator>
			</view>
			
			<view class="list_2" v-show="tabActive === 1">
				<navigator v-for="(item, index) in 2" :key="index" class="item item_2" url="/page_admin/property-catalogue/bill-detail/bill-detail">
					<view class="flex-space-between">
						<view class="flex-grow-1 d-flex flex-column justify-space-between" style="height: 100rpx; padding: 6rpx 0; margin-right: 10rpx;">
							<view class="flex-space-between">
								<view class="text_4">典雅花店</view>
								<view class="text_5">24吨</view>
							</view>
							<view class="flex-space-between">
								<view class="text_6">水费</view>
								<view class="text_7">抄表时间：2021/12/15 12:00:00</view>
							</view>
						</view>
						<van-image width="100rpx" height="100rpx" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b6fb892c852500127d8c83/16393822833287153007.png" />
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabActive: 0,
			value1: 0,
			value2: 0,
			value3: 0,
			option1: [
				{ text: '店铺', value: 0 }
			],
			option2: [
				{ text: '水费', value: 0 }
			],
			option3: [
				{ text: '默认排序', value: 0 }
			],
		}
	},
}
</script>

<style lang="scss" scoped>
.property-catalogue {
	min-height: 100vh;
	background-color: rgb(243,243,243);
	
	.content {
		padding: 30rpx;
	}
	
	.list_1 {
		.top {
			padding: 30rpx;
			border-bottom: 1rpx solid rgb(239,239,239);
			
			.text_1 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 28rpx;
			}
			
			.text_2 {
				margin-top: 30rpx;
				color: rgb(102,102,102);
				font-size: 26rpx;
				line-height: 25rpx;
			}
		}
		
		.bottom {
			padding: 15rpx 30rpx;
			
			.text_3 {
				color: rgb(187,187,187);
				font-size: 22rpx;
			}
			
			/deep/.van-button {
				padding: 0 30rpx;
			}
		}
	}
	
	.item {
		background-color: rgb(255,255,255);
		box-shadow: 0px 2rpx 6.86rpx 0.14rpx rgba(0,0,0,0.1);
		border-radius: 10rpx;
		
		& + .item {
			margin-top: 30rpx;
		}
		
		&.item_2 {
			padding: 20rpx 30rpx;
		}
	}
	
	.list_2 {
		.text_4 {
			font-size: 28rpx;
			font-weight: 700;
			line-height: 28rpx;
		}
		
		.text_5 {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 24rpx;
		}
		
		.text_6 {
			font-size: 26rpx;
			font-weight: 500;
			line-height: 25rpx;
		}
		
		.text_7 {
			color: rgb(187,187,187);
			font-size: 22rpx;
			font-weight: 500;
			line-height: 22rpx;
		}
	}
}
</style>
